<template>
    <div class="integral">
        <nut-tabs v-model="tab">
            <nut-tab-pane title="我的积分">
                <div class="current">
                    <div class="num flex-a"><img style="width: 60rpx;
                    height: 60rpx;margin-right: 10rpx;" src="https://cxj.szzkba.cn/up/uploadPath/icon/pP2qsCd.png"
                            alt="">
                        <span>{{ integral
                        }}</span>
                    </div>
                    <nut-button type="info" size="small" block style="width: 60%;margin: 0 auto;"
                        @click="jumpTo('/packageA/pages/changeIntegral/index')">去兑换</nut-button>
                    <div class="line"></div>
                    <div class="list">
                        <div class="item flex-a flex-b" v-for="item in list" :key="item">
                            <div class="left">
                                <div>{{ item.type == 0 ? '充值赠送' : item.type == 1 ? '消费赠送' : item.type == 2 ? '活动积分' :
                                    item.type ==
                                        8 ? '使用活动积分' : item.type == 9 ? '使用消费积分' : '' }}</div>
                            </div>
                            <div>{{ item.createTime.split(' ')[0] }}</div>
                            <div class="right">+{{ item.num }}</div>
                        </div>
                    </div>
                </div>
            </nut-tab-pane>
            <nut-tab-pane title="兑换列表">
                <div class="cart-item flex-a" :class="item.show ? 'show' : 'hidden'" v-if="changeList.length > 0"
                    v-for="item in changeList" :key="item.goodsId"
                    @click="jumpTo('/packageA/pages/productDetail/index?goodsId=' + item.goodsId)">
                    <nut-card :img-url="item.goodsCoverImg" :title="item.goodsName" :price="item.sellingPrice"
                        :vipPrice="item.originalPrice" :shopDesc="item.goodsIntro">
                    </nut-card>
                </div>
                <nut-empty v-else description="敬请期待"></nut-empty>
            </nut-tab-pane>
        </nut-tabs>
        <nut-popup position="bottom" v-model:visible="show">
            <nut-picker v-model="popupValue" :columns="columns" @confirm="popupConfirm" @cancel="show = false">
            </nut-picker>
        </nut-popup>
        <nut-dialog v-model:visible="visible" :no-footer="true">
            <div style="font-weight: bold;font-size: 30rpx;">请联系客服经理协助办理</div>
            <image style="width:200px;height: 200px;" :src="qrCode">
            </image>
        </nut-dialog>
    </div>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import { } from '@nutui/icons-vue-taro';
import { RectDown } from '@nutui/icons-vue-taro';
import { reactive, toRefs, onMounted } from 'vue';
import { getRecharge, getActRechargeInfo } from '../../../../api/index'
export default {
    components: {
        RectDown
    },
    setup() {
        const data = reactive({
            integral: 0,
            tab: 0,
            years: 2023,
            show: false,
            popupDesc: '',
            popupValue: [],
            columns: [
                { text: '2023', value: '2023' },
                { text: '2022', value: '2022' },
                { text: '2021', value: '2021' },
                { text: '2020', value: '2020' },
                { text: '2019', value: '2019' },
            ],
            list: [],
            qrCode: 'https://cxj.szzkba.cn/up/uploadPath/icon/erweima.jpg',
            visible: false,
            nodata: true,
            changeList: [],
            basicData: {
                list: [],
                name: '',
                num: '',
                bank: '',
                tel: ''
            }
        })
        onMounted(() => {
            getRecharges()
            getActRechargeInfo().then(res => {
                if (res.resultCode == 200) {
                    data.list = res.data
                }
            })
        });
        const popupConfirm = ({ selectedValue, selectedOptions }) => {
            data.years = selectedOptions.map((val: any) => val.text).join(',');
            data.show = false;
        };
        const getRecharges = () => {
            getRecharge().then(res => {
                if (res.resultCode == 200) {
                    data.integral = res.data.integral
                }
            })
        }
        const showPop = () => {
            data.show = true
        }
        const apply = () => {
            data.visible = true
        }
        const subApply = () => {

        }
        const jumpTo = (path) => {
            Taro.navigateTo({ url: path })
        }
        return {
            ...toRefs(data), getRecharges, popupConfirm, showPop, apply, jumpTo, subApply
        }
    }
};
</script>


<style lang="scss" >
.integral {
    background: #fff;
    position: relative;

    .btn {
        width: 60%;
        position: absolute;
        bottom: 10rpx;
        padding-left: 20%;
    }

    .nut-tab-pane {
        padding: 20rpx;
    }

    .current {
        .sub {
            font-size: 32rpx;
            padding: 0 0 30rpx;
        }

        .num {
            font-size: 50rpx;
            text-align: center;
            padding: 100rpx 0;
            justify-content: center;
        }

        .line {
            margin-top: 50rpx;
            border-bottom: 0.5rpx dashed #dfdddd;
        }

        .list {
            padding-top: 50rpx;

            .item {
                border-bottom: 1rpx solid #F9F9F9;
                padding-bottom: 10rpx;
                margin-bottom: 10rpx;

                .left {
                    font-size: 28rpx;
                    color: #666;
                }

                .right {
                    color: #333;
                    font-weight: bold;
                }
            }
        }
    }

    .head {
        .left {
            border: 1rpx solid #DDDDDD;
            width: 130rpx;
            padding: 10rpx 8rpx;
            box-sizing: border-box;
            font-size: 26rpx;
        }
    }

    .cart-item {
        margin-bottom: 20rpx;
        box-shadow: 0 0 20rpx 20rpx #f9f9f9;
        border-radius: 20rpx;

        .nut-card .nut-card__left {
            width: 160rpx;
            height: 160rpx;

            image {
                width: 80%;
                height: 80%;
                margin: 10%;
            }
        }

        .nut-card .nut-card__right {
            padding: 16rpx 20rpx;
        }

        .nut-card__right__price__origin {
            display: none;
        }
    }

    .cart-item.show {
        .nut-card__right__price__origin {
            display: inline-block;

            view {
                text-decoration: line-through;
            }
        }
    }

    .cart-item.hidden {
        .nut-card__right__price__origin {
            display: none;

            view {
                text-decoration: line-through;
            }
        }
    }

    .submit {
        padding: 30rpx 0;

        .nut-button {
            width: 94%;
            margin: 0 auto;
        }
    }
}
</style>